<template>
  <div class="body" v-loading="loading.status">
    <el-page-header
      class="page-header"
      @back="goBack"
      :content="title"
      style=""
    >
    </el-page-header>
    <el-form class="form" :model="form">
      <Tinymce :height="'700px'" :width="'100%'" v-model="form.value"></Tinymce>
      <div class="form_footer">
        <el-button type="success" @click="fromSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce/Tinymce.vue";
import { apiConfigDetails, apiConfigUpdate } from "@/api/apiConfig";
import { base64_encode, base64_decode } from "@/utils/base64Util";
import {
  getUploadingImgUrl,
  getUploadingVideoUrl,
  getImgUrl,
} from "@/api/uploading";
// import { arrayToString, stringToArray } from "@/utils/arrayUtil";
import { getToken } from "@/utils/auth";
export default {
  components: {
    Tinymce,
  },
  name: "Index",
  data() {
    return {
      title: "",
      init_form: {
        key: "",
        value: "",
      },
      form: {},
      fromViewCofing: {
        input_width: "120px",
        label_width: "160px",
      },
      loading: {
        status: false,
        loadingCount: 0,
      },
    };
  },
  created() {
    console.log(base64_encode("12345"), "===");
    var params = this.$route.query;
    this.title = params.title;
    if (params.key != 0) {
      this.key = params.key;
      this.req_details(this.key);
    }
    this.form = this.init_form;
    // this.uploading_img.api_uploading_img_url = getUploadingImgUrl();
    // this.uploading_img.api_uploading_video_url = getUploadingVideoUrl();
    // this.uploading_img.headers = {
    //   token: getToken(),
    // };
  },
  methods: {
    //图片展示
    imgShow(url) {
      return getImgUrl(url);
    },
    /**表单提交 */
    fromSubmit() {
      const _this = this;
      var form = this.form;
      console.log(form, "form");
      var params = { ...this.form };
      params.value = base64_encode(form.value);
      apiConfigUpdate(params)
        .then((response) => {
          _this.$message({
            message: response.msg,
            type: "success",
          });
        })
        .catch(function (result) {
          _this.$message.error(result.msg);
        });
    },
    // 获取详情
    req_details(key) {
      this.loading_start();
      if (!key) {
        return;
      }
      const _this = this;
      apiConfigDetails({
        key: key,
      })
        .then((response) => {
          const result = response.data;
          _this.form.key = result.key;
          _this.form.value = base64_decode(result.value);
          _this.loading_end();
        })
        .catch(function (result) {
          _this.$message.error(result.msg);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 开始加载
    loading_start() {
      const _this = this;
      if (_this.loading.loadingCount === 0) {
        // 显示加载状态
        _this.loading.status = true;
      }
      _this.loading.loadingCount += 1;
    },
    // 停止加载
    loading_end() {
      const _this = this;
      if (_this.loading.loadingCount > 0) {
        _this.loading.loadingCount -= 1;
        if (_this.loading.loadingCount === 0) {
          _this.loading.status = false;
        }
      }
    },
  },
};
</script>

<style lang="scss">
.body {
  // padding: 5px;
  background-color: #fff;
  // position: fixed;
  // position: absolute;
  // top: 0;
  // bottom: 0;
  // display: flex;
  // flex-direction: column;

  .table_operate {
    background-color: #fff;

    .btn_add {
      margin-top: 12px;
      margin-bottom: 12px;
      margin-left: 12px;
    }
  }

  .table_filtrate {
    margin-bottom: 20px;
    display: flex;
    background-color: #fff;
    padding: 20px;
    align-items: center;
    border-radius: 12px;

    .tag {
      font-size: 12px;
      color: #424242;
      padding-right: 10px;
    }

    .input {
      padding-right: 30px;
    }

    .input_fuzzy_search {
      width: 230px;
      margin-right: 10px;
    }
  }

  .table {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
  }

  .form {
    // width: 95%;
    width: 100%;
    height: 100%;

    .inp {
      width: 230px;
    }

    .upload {
      .tip {
        margin-left: 10px;
        color: #616161;
      }
    }

    .form_footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #616161;
      padding: 10px;
      text-align: center;
    }
  }
}
</style>